<template>
	<view class="big-box flex-col align-center">
		<top-navigation backIconColor='#FFF' bgColor="#CC1D1D" :isFix='true' :isShow='true'>
			<text slot='center-slot' class="center-slot">政要通</text>
		</top-navigation>
		<u-toast ref="uToast" />
		<view class="flex-col align-center" v-if="loading">
			<view class="" style="width: 100vw;">
				<load-swiper :list="bg_cover" circular height='352rpx' bgColor="#ffffff" />
			</view>

			<view class="form-info-scroll" style="flex: 1;">

				<view class="car-select justify-start align-center">
					<view class="tips center">
						<x-img static src="/static/images/guest/tips.png" width="36rpx" height="32rpx"></x-img>
					</view>
					{{guestDetail.remind}}
				</view>

			</view>
			<view class="form-info">
				<!-- <u-picker @close='airShow' @confirm="airConfirm" @cancel="airShow=!airShow" :show="airShow"
					:columns="airColumns" keyName='name'></u-picker> -->
				<picker :range="airColumns[0]" range-key='name' mode='selector' @change='airConfirm' header-text='选择机场'>
					<view class="info-box-item justify-between align-center">
						<view class="">
							选择机场
						</view>
						<view class="justify-start align-center">
							<view class="select">
								{{air.star_site}}
							</view>
							<u-icon name="arrow-right" size="28rpx"></u-icon>
						</view>
					</view>
				</picker>
				<!-- <view @tap="selectAir" class="info-box-item justify-between align-center">
					<view class="">
						选择机场
					</view>
					<view class="justify-start align-center">
						<view class="select">
							{{air.name}}
						</view>
						<u-icon name="arrow-right" size="28rpx"></u-icon>
					</view>
				</view> -->
				<u-picker @close='serviceShow' @confirm="serviceConfirm" @cancel="serviceShow=!serviceShow"
					:show="serviceShow" :columns="serviceColumns"></u-picker>
				<view @tap="selectService" class="border-t info-box-item justify-between align-center">
					<view class="">
						服务类型
					</view>
					<view class="justify-start align-center">
						<view class="select">
							{{split_type}}
						</view><u-icon name="arrow-right" size="28rpx"></u-icon>
					</view>
				</view>
				<u-picker @close='flightShow' @confirm="flightConfirm" @cancel="flightShow=false" :show="flightShow"
					:columns="flightColumns"></u-picker>
				<view @tap="selectFlight" class="border-t info-box-item justify-between align-center">
					<view class="">
						航班类型
					</view>
					<view class="justify-start align-center">
						<view class="select">
							{{flight_type}}
						</view> <u-icon name="arrow-right" size="28rpx"></u-icon>
					</view>
				</view>
				<view class="border-t info-box-item justify-between align-center">
					<view class="">
						车牌号
					</view>
					<view class=" align-center" @tap="Keyboardshow=true">
						<view class="select" v-if="value">
							{{value}}
						</view>
						<view class="code" v-else>
							自驾车辆,请输入车牌号
						</view>
						<!-- <u-input :disabled="true"  v-model="value" placeholderStyle='color:#8C8C8C' inputAlign='right' class="info-box" fontSize='26rpx'
							placeholder="自驾车辆,请输入车牌号" border="none" clearable></u-input> -->
					</view>
				</view>
			</view>
			<view class="guest-vip">
				<view class="guest-vip-title align-center">
					贵宾服务（国内送机）
				</view>
				<view class="line">

				</view>
				<view class="guest-vip-box">
					<view class="flex-col align-center" v-for="item,index in guestDetail.service" :key="index">
						<x-img class="vip-icon" :src="item.icon" width="67rpx" height="67rpx"></x-img>
						{{item.name}}
					</view>
				</view>

			</view>
			<view class="flow">
				<u-parse :content='guestDetail.content'></u-parse>
			</view>
			<!-- <view class="start justify-center align-center" @tap="start">
				预约
			</view> -->
			<bottom-btn @onClick='start'>预约</bottom-btn>
		</view>
		<load-page :loading="loading"></load-page>
		<car-note-madal :carNote='guestDetail.notice' v-if="noteShow" :isShow='noteShow' @onClick='onClick'
			@close='noteShow=false'></car-note-madal>
		<u-keyboard @confirm='keyConfirm' :overlay='false' @cancel='Keyboardshow=false' @close='Keyboardshow=false'
			ref="uKeyboard" mode="car" @change="valChange" @backspace="backspace" :show="Keyboardshow"></u-keyboard>
	</view>
</template>

<script>
	import {
		licencePlate,
		arriveType,
	} from '@/utils/constants.js'
	import carNoteMadal from '../modal/carNoteMadal.vue'

	import {
		host
	} from '@/config/config.js'
	import {
		mapActions
	} from 'vuex'
	export default {
		name: "goods-details",
		components: {
			carNoteMadal,
		},
		data() {
			return {
				value: '',
				Keyboardshow: false,
				noteShow: false,
				useCarTime: Number(new Date()),
				useCarShow: false,
				car_note: '',
				carInd: null,
				airShow: false,
				carTypeCurrent: 0,
				licencePlate: licencePlate,
				guestDetail: {
					"cover": "",
					"remind": "",
					"notice": "",
					"content": "",
					"service": []
				},
				loading: false,
				bg_cover: [],

				selectCarTypeCurrent: 0,
				airColumns: [
					[]
				],
				air: {
					name: '',
					star_site: '',
					id:null,
				},
				serviceShow: false,
				serviceColumns: [
					[
						'接机', '送机'
					]
				],
				split_type: '',
				flight_type: '',
				flightShow: false,
				flightColumns: [
					[
						'国内航班', '国际航班'
					]
				],
			};
		},
		onLoad(option) {
			this.getGuestInfo()

		},

		computed: {




		},

		methods: {
			...mapActions(['getGuestBgCover', 'getGuestdetail', 'getAirList']),
			onClick() {
				let info = {
					"airport": this.air.star_site, //机场
					"viplounge_title": "政要通贵宾厅",//服务标题
					"car_num": this.value,//车牌号
					"split_type": this.split_type,//服务类型 接机
					"flight_type": this.flight_type, //国内国外航班类型
					"people_num": "1",
					"flight_num": "",
					"flight_time": "",
					"usage_time": "",
					"distance": 0,
					"notes": "",
					"price": "",
					"users": [{
						"sex": 0,
						"user_name": "",
						"user_phone": ""
					}],
					airport_id:this.air.id
				}
				console.log(this.$store);
				this.$store.commit('SAVE_GUEST_INFO', info)
				this.$navto('/guest/order/order')
			},
			// 按键被点击(点击退格键不会触发此事件)
			selectAir() {
				this.airShow = true
				this.Keyboardshow = false
			},
			selectService() {
				this.serviceShow = true
				this.Keyboardshow = false
			},
			selectFlight() {
				this.flightShow = true
				this.Keyboardshow = false
			},
			valChange(val) {
				if (this.value.length >= 7) {
					return
				}
				if (this.value.length > 0 && !this.licencePlate.includes(val)) {
					// 将每次按键的值拼接到value变量中，注意+=写法
					if (this.licencePlate.includes(this.value[0])) {
						console.log(this.value);
						this.value += val;
					} else if (!this.value) {
						console.log(this.value);
						this.value += val;
					}
				} else if (this.value.length == 0 && this.licencePlate.includes(val)) {
					console.log(this.value);
					this.value += val;

				} else {
					uni.$toast('请输入正确的车牌号')
				}
				console.log(this.value);
			},
			// 退格键被点击
			backspace() {
				// 删除value的最后一个字符
				if (this.value.length) this.value = this.value.substr(0, this.value.length - 1);
				console.log(this.value);
			},
			keyConfirm() {
				this.Keyboardshow = false
			},
			airConfirm(e) {
				// console.log(e.indexs[0]);
				let value = e.detail.value[0]
				this.air.star_site = this.airColumns[0][value].name
				this.air.latAndLon = this.airColumns[0][value]
				this.air.id = this.airColumns[0][value].id
				// this.air = this.airColumns[0][e.indexs[0]]
				// this.airShow = false
			},
			serviceConfirm(e) {
				console.log(e.indexs[0]);
				this.split_type = this.serviceColumns[0][e.indexs[0]]
				this.serviceShow = false
			},
			flightConfirm(e) {
				console.log(e.indexs[0]);
				this.flight_type = this.flightColumns[0][e.indexs[0]]
				this.flightShow = false
			},
			tapTab(e) {
				if (this.carTypeCurrent == 0) {
					// 第一个接送机
					this.selectCarTypeCurrent = e.ind
				} else {
					this.selectCarTypeCurrent = e.ind
					// 包车
				}
				console.log(e.ind);
			},
			start() {
				if (true) {
					this.noteShow = true
				}
			},
			select(e, i) {
				this.carTypeCurrent = i
			},
			selectCar(item, index) {
				this.carInd = index
			},
			async getGuestInfo() {
				// 背景配置
				let bgres = await this.getGuestBgCover()
				this.bg_cover = bgres.banner
				//页面信息
				this.guestDetail = await this.getGuestdetail()
				uni.setStorageSync('remind', this.guestDetail.remind)
				// 机场获取
				let arires = await this.getAirList()
				this.air.star_site = arires[0].name
				this.split_type = this.serviceColumns[0][0]
				this.flight_type = this.flightColumns[0][0]
				this.air.id = arires[0].id
				this.airColumns = [
					[...arires]
				]
				// this.car_note = tabList.car_note
				this.loading = true
			},


		}
	}
</script>

<style>
	@import '/common/css/common.css';
</style>
<style lang="scss" scoped>
	.big-box {
		background: #F3F3F3;
		min-height: 100vh;
		padding: 0 0 160rpx 0;

		.border-t {
			border-top: 1rpx solid rgba(0, 0, 0, 0.1);
		}

		.placeholder-class {
			color: #000;
		}

		.car-select {
			margin: 27rpx 0 0 40rpx;
			font-family: Source Han Sans SC, Source Han Sans SC;
			font-weight: 500;
			font-size: 26rpx;
			color: #CC1D1D;

			.tips {
				width: 57rpx;
				height: 57rpx;
				background: #FFF;
				border-radius: 50%;
				margin-right: 16rpx;
				box-shadow: 0rpx 4rpx 4rpx 0rpx rgba(0, 0, 0, 0.1);
			}
		}






		.form-info-scroll {
			width: 100vw;

		}

		.form-info {
			margin-top: 19rpx;
			width: 670rpx;
			height: 385rpx;
			padding: 0 33rpx 0 30rpx;
			background: #FFFFFF;
			box-shadow: 0rpx 4rpx 10rpx 0rpx rgba(0, 0, 0, 0.1);
			border-radius: 20rpx 20rpx 20rpx 20rpx;

			.select {
				font-family: Source Han Sans SC, Source Han Sans SC;
				font-weight: 400;
				font-size: 32rpx;
				color: #010101;
				margin-right: 10rpx;
			}

			.info-box-item {
				height: 96rpx;
				font-family: Source Han Sans SC, Source Han Sans SC;
				font-weight: 400;
				font-size: 26rpx;
				color: #6C6C6C;

				.code {
					color: #8C8C8C;
				}
			}
		}

		.guest-vip {
			margin-top: 30rpx;
			width: 670rpx;
			background: linear-gradient(180deg, #E9C19D 0%, #C38C5A 100%);
			box-shadow: 0rpx 4rpx 4rpx 0rpx rgba(0, 0, 0, 0.1);
			border-radius: 20rpx 20rpx 20rpx 20rpx;

			font-family: Source Han Sans SC, Source Han Sans SC;
			font-weight: 400;
			font-size: 22rpx;
			color: #FFFFFF;

			.guest-vip-title {
				padding-left: 31rpx;
				font-family: Source Han Sans SC, Source Han Sans SC;
				font-weight: 400;
				font-size: 32rpx;
				color: #643B15;
				height: 87rpx;

			}

			.line {
				width: 670rpx;
				height: 3rpx;
				background: linear-gradient(90deg, #DDB087 0%, #FFFFFF 73%, #DCAF86 100%);
				border-radius: 0rpx 0rpx 0rpx 0rpx;
				margin-bottom: 25rpx;
			}

			.guest-vip-box {
				padding-bottom: 25rpx;
				display: grid;
				grid-template-columns: repeat(3, 33.33%);

				.vip-icon {
					margin-bottom: 19rpx;
				}
			}
		}

		.flow {
			width: 100vw;
			margin-top: 36rpx;
		}

		.start {
			width: 280rpx;
			height: 90rpx;
			background: #CC1D1D;
			border-radius: 10rpx 10rpx 10rpx 10rpx;
			font-family: Source Han Sans SC, Source Han Sans SC;
			font-weight: 400;
			font-size: 36rpx;
			color: #FFFFFF;
			position: fixed;
			bottom: constant(safe-area-inset-bottom);
			bottom: env(safe-area-inset-bottom);
		}



	}

	.center-slot {
		color: #FFF;
	}
</style>